<template>
  <div id="list">
    <h1>{{ listTheme }}
      <div id="more" @click="toMorePage(listTheme)">更多</div>
    </h1>
    <ul class="articleList">
      <li v-for="(item, index) in listData" :key="index" @click="toArticle(item)">
        <div class="imageBox">
          <img :src="item.img" alt="文章图片" @error="defaultImg()">
        </div>
        <h3>{{ item.theme }}</h3>
        <p>{{ item.introduction }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  // 从父组件获取数据来展示：获取主题，文章列表
  props: ['listTheme', 'listData'],
  data() {
    return {
      // 开关灯同步量
      light: false
    }
  },
  methods: {
    // 跳转文章方法
    toArticle(item) {
      // 触发开关灯同步事件
      this.$bus.$emit('lightSynchronous', 'ListBar')
      // 打开新页面 并传递参数给文章内容页面，告诉是哪个文章
      let routeUrl = this.$router.resolve({
        path: '/article',
        query: {
          id: item.id,
          theme: item.theme,
          introduction: item.introduction,
          light: this.light // 转递开关灯状态
        }
      })
      window.open(routeUrl.href, '_blank')
    },
    // 跳转更多文章方法 并传递参数(点的是哪个主题)给更多页面
    toMorePage(theme) {
      this.$router.push({
        path: '/more',
        query: {
          theme: theme,
          search: false
        }
      })
    },
    // 提供回调函数给App组件，同步light变量状态
    listBarLightSynchronous(appLight) {
      this.light = appLight
    },
    // 返回默认的图片
    defaultImg() {
      if (event.type == 'error') {
        event.target.src = 'https://bokey.oss-cn-shenzhen.aliyuncs.com/img/staticImage/notPicture.png'
      }
    },
  },
  mounted() {
    this.$bus.$on('listBarLightSynchronous', this.listBarLightSynchronous)
  },
  beforeDestroy() {
    this.$bus.$off('listBarLightSynchronous')
  },
}
</script>

<style lang="scss" scoped>
#list {
  overflow: hidden;
}

h1 {
  color: $color-main-text;
  font-size: $font-size-large;
  font-weight: $font-weight-large;
  margin: 20px 50px 50px 60px;
}

#more {
  width: 50px;
  height: 50px;
  margin: 0 30px;
  cursor: pointer;
  line-height: 50px;
  color: $color-text;
  float: right;
  font-size: $font-size-small;
  text-align: center;
  font-weight: $font-weight-medium;
}

#more:hover {
  color: $color-main-text;
}

.articleList {
  width: 100%;
  overflow: hidden;
  margin: 20px 0px 20px 50px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr .3fr;
  grid-gap: 20px;
}

.articleList>li {
  display: inline-block;
  background-color: $color-list;
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 5px 8px;
  transition: all .5s;
}

.imageBox {
  height: 65%;
  width: 70%;
  border-radius: 20px;
  margin: 20px auto;
  overflow: hidden;
}

img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: all .5s;
}

.articleList>li:hover img {
  transform: scale(1.2);
}

h3 {
  color: $color-main-text;
  font-size: $font-size-medium;
  font-weight: $font-weight-medium;
  display: block;
  width: 70%;
  margin: 10px auto;
  overflow: hidden;
  transition: all .5s;
  // 设置文本行数为2行，内容超出显示省略号
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

p {
  color: $color-text;
  font-size: $font-size-small;
  font-weight: $font-weight-medium;
  width: 70%;
  overflow: hidden;
  margin: 0 auto;
  // 设置文本换行显示
  word-wrap: break-word;
  word-break: break-all;
  // 设置文本行数为2行，内容超出显示省略号
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
</style>